<template>
  <div class="ai-chat-container">
    <!-- SEO Meta Tags -->
    <Head>
      <title>AI智能助手 - 在线聊天对话</title>
      <meta name="description" content="与AI智能助手进行实时对话，支持联网搜索，获得准确、及时的回答和帮助。" />
      <meta name="keywords" content="AI助手,智能对话,在线聊天,人工智能,联网搜索" />
      <meta property="og:title" content="AI智能助手 - 在线聊天对话" />
      <meta property="og:description" content="与AI智能助手进行实时对话，支持联网搜索" />
      <meta property="og:type" content="website" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </Head>

    <!-- Header -->
    <div class="chat-header">
      <div class="header-content">
        <div class="ai-avatar">
          <span class="avatar-emoji"></span>
        </div>
        <div class="header-info">
          <h1 class="ai-title">AI智能助手</h1>
          <p class="ai-subtitle">
            <span class="status-dot" :class="{ 'online': isOnline }"></span>
            {{ isOnline ? '在线' : '离线' }} · 支持联网搜索 🌐
          </p>
        </div>
        <div class="header-actions">
          <div class="token-info">
            <span class="token-label">💎 Token余额</span>
            <span class="token-count">{{ userTokens }}</span>
          </div>
          <a-button
            type="text"
            shape="circle"
            @click="clearChat"
            :disabled="messages.length === 0"
            title="清空聊天"
          >
            🗑️
          </a-button>
          <a-button
            type="text"
            shape="circle"
            @click="startNewChat"
            title="新建对话"
          >
            ➕
          </a-button>
        </div>
      </div>
    </div>

    <!-- Chat Messages -->
    <div class="chat-messages" ref="messagesContainer">
      <div class="messages-wrapper">
        <!-- Welcome Message -->
        <div v-if="messages.length === 0" class="welcome-message">
          <div class="welcome-content">
            <div class="welcome-emoji">👋</div>
            <h2>欢迎使用AI智能助手</h2>
            <p>我可以帮您解答问题、搜索信息、提供建议等</p>
            <div class="session-info">
              <span class="session-id">会话ID: {{ currentChatId }}</span>
            </div>
            <div class="quick-actions">
              <a-button
                v-for="action in quickActions"
                :key="action.text"
                type="dashed"
                size="small"
                @click="sendQuickMessage(action.text)"
              >
                {{ action.emoji }} {{ action.text }}
              </a-button>
            </div>
          </div>
        </div>

        <!-- Message List -->
        <div
          v-for="(message, index) in messages"
          :key="index"
          class="message-item"
          :class="{ 'user-message': message.type === 'user', 'ai-message': message.type === 'ai' }"
        >
          <div class="message-avatar">
            <img v-if="message.type === 'user'" :src="userVo?.userAvatar" alt="user-avatar" class="avatar-image">
<!--            <span v-if="message.type === 'user'"></span>-->
            <span v-else>🤖</span>
          </div>
          <div class="message-content">
            <div class="message-bubble">
              <div v-if="message.type === 'ai' && message.isTyping" class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
                <div class="typing-text">AI正在思考中...</div>
              </div>
              <div v-else class="message-text" v-html="formatMessage(message.content)"></div>
              <!-- Token消耗信息 -->
              <div v-if="message.type === 'ai' && message.tokenUsed && !message.isTyping" class="token-usage">
                <span class="token-icon">⚡</span>
                <span class="token-text">消耗 {{ message.tokenUsed }} tokens</span>
              </div>
            </div>
            <div class="message-time">{{ formatTime(message.timestamp) }}</div>
          </div>
        </div>

        <!-- Error Message -->
        <div v-if="errorMessage" class="error-message">
          <div class="error-content">
            <span class="error-icon">⚠️</span>
            <span class="error-text">{{ errorMessage }}</span>
            <a-button type="link" size="small" @click="clearError">关闭</a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- Input Area -->
    <div class="chat-input-area">
      <div class="input-wrapper">
        <a-textarea
          v-model:value="inputMessage"
          :placeholder="isLoading ? 'AI正在思考中...' : '输入您的问题... 💭'"
          :disabled="isLoading || userTokens <= 0"
          :auto-size="{ minRows: 1, maxRows: 4 }"
          @keydown="handleKeyDown"
          class="message-input"
        />
        <div class="input-actions">
          <a-button
            type="primary"
            shape="circle"
            :loading="isLoading"
            :disabled="!inputMessage.trim() || isLoading || userTokens <= 0"
            @click="sendMessage"
            class="send-button"
          >
            <template #icon>
              <span v-if="!isLoading">🚀</span>
            </template>
          </a-button>
        </div>
      </div>
      <div class="input-tips">
        <span class="tip-item">💡 支持联网搜索</span>
        <span class="tip-item">⚡ 实时对话</span>
        <span class="tip-item">🔒 安全可靠</span>
        <span v-if="userTokens <= 0" class="tip-item warning">⚠️ Token余额不足</span>
      </div>
    </div>

    <!-- Token不足提示 -->
    <a-modal
      v-model:open="showTokenModal"
      title="Token余额不足"
      :footer="null"
      centered
    >
      <div class="token-modal-content">
        <div class="modal-icon">💎</div>
        <p>您的Token余额不足，无法继续对话。</p>
        <p>请联系管理员充值或稍后再试。</p>
        <div class="modal-actions">
          <a-button type="primary" @click="showTokenModal = false">我知道了</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue'
import { message as antMessage, Modal } from 'ant-design-vue'
import { cleanChatMemory, doChatWithAiSync } from '@/api/chatController.ts'
import { getLoginUser, getUserVoById } from '@/api/userController.ts'
import LoginUserVO = API.LoginUserVO


// 响应式数据
const inputMessage = ref('')
const isLoading = ref(false)
const isOnline = ref(true)
const messagesContainer = ref<HTMLElement>()
const currentChatId = ref('')
const userTokens = ref(1000) // 用户token余额，可以从用户信息接口获取
const errorMessage = ref('')
const showTokenModal = ref(false)
const userVo = ref<LoginUserVO>()

// 获取用户信息（模拟接口）
const fetchUser = async () => {
  try {
    const res = await getLoginUser()
    userVo.value=res.data.data
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}


// 页面加载时请求一次
onMounted(() => {
  fetchUserTokens()
  fetchUser()
})

// 消息列表
interface Message {
  type: 'user' | 'ai'
  content: string
  timestamp: Date
  isTyping?: boolean
  tokenUsed?: number
}

const messages = reactive<Message[]>([])

// 快捷操作
const quickActions = [
  { emoji: '🔍', text: '搜索最新资讯' },
  { emoji: '💡', text: '给我一些建议' },
  { emoji: '📚', text: '解释一个概念' },
  { emoji: '🎯', text: '制定学习计划' },
  { emoji: '🌟', text: '推荐一些工具' },
  { emoji: '📊', text: '数据分析帮助' }
]

// 生成聊天ID
const generateChatId = () => {
  return 'chat_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
}

// 初始化聊天ID
const initializeChatId = () => {
  const savedChatId = localStorage.getItem('currentChatId')
  if (savedChatId) {
    currentChatId.value = savedChatId
  } else {
    currentChatId.value = generateChatId()
    localStorage.setItem('currentChatId', currentChatId.value)
  }
}

// 开始新对话
const startNewChat = () => {
  Modal.confirm({
    title: '开始新对话',
    content: '确定要开始新的对话吗？当前对话记录将被清空。',
    okText: '确定',
    cancelText: '取消',
    onOk() {
      messages.length = 0
      currentChatId.value = generateChatId()
      localStorage.setItem('currentChatId', currentChatId.value)
      clearError()
      antMessage.success('已开始新对话')
    }
  })
}

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return

  if (userTokens.value <= 0) {
    showTokenModal.value = true
    return
  }

  const userMessage: Message = {
    type: 'user',
    content: inputMessage.value.trim(),
    timestamp: new Date()
  }

  messages.push(userMessage)

  // 添加AI思考中的消息
  const aiMessage: Message = {
    type: 'ai',
    content: '',
    timestamp: new Date(),
    isTyping: true
  }
  messages.push(aiMessage)

  const currentMessage = inputMessage.value.trim()
  inputMessage.value = ''
  isLoading.value = true
  clearError()

  try {
    // 滚动到底部
    await nextTick()
    scrollToBottom()

    // 调用AI接口
    const response = await doChatWithAiSync({
      message: currentMessage,
      chatId: currentChatId.value
    })

    // 检查响应状态
    if (response.data.code === 0 && response.data) {
      // 移除typing状态并更新内容
      const lastMessage = messages[messages.length - 1]
      if (lastMessage && lastMessage.isTyping) {
        lastMessage.isTyping = false
        lastMessage.content = response.data.data?.content|| '抱歉，我现在无法回答这个问题。'
        lastMessage.tokenUsed = response.data.data?.token || 0

        // 更新用户token余额
        if (response.data.data?.token) {
          userTokens.value = Math.max(0, userTokens.value - response.data.data?.token)

          // 如果token不足，显示警告
          if (userTokens.value <= 10) {
            antMessage.warning(`Token余额不足，剩余: ${userTokens.value}`)
          }
        }
      }
    } else {
      // 处理业务错误
      messages.pop()
      const errorMsg = response.data.data?.content || '请求失败，请稍后重试'

      if (errorMsg.includes('token不足')) {
        showTokenModal.value = true
        userTokens.value = 0
      } else {
        errorMessage.value = errorMsg
        messages.push({
          type: 'ai',
          content: `抱歉，${errorMsg} 😔`,
          timestamp: new Date()
        })
      }
    }

  } catch (error: any) {
    console.error('AI聊天错误:', error)

    // 移除typing消息并添加错误消息
    messages.pop()

    let errorMsg = '网络连接出现问题，请稍后重试'

    if (error.response) {
      if (error.response.status === 401) {
        errorMsg = '登录已过期，请重新登录'
      } else if (error.response.status === 403) {
        errorMsg = 'Token余额不足，请联系管理员充值'
        showTokenModal.value = true
      } else if (error.response.data?.message) {
        errorMsg = error.response.data.message
      }
    }

    errorMessage.value = errorMsg
    messages.push({
      type: 'ai',
      content: `抱歉，${errorMsg} 🔄`,
      timestamp: new Date()
    })

    antMessage.error(errorMsg)
  } finally {
    isLoading.value = false
    await nextTick()
    scrollToBottom()
  }
}

// 快捷发送
const sendQuickMessage = (text: string) => {
  inputMessage.value = text
  sendMessage()
}

// 键盘事件处理
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    sendMessage()
  }
}

// 清空聊天
const clearChat = () => {
  Modal.confirm({
    title: '清空聊天记录',
    content: '确定要清空所有聊天记录吗？此操作不可恢复。',
    okText: '确定',
    cancelText: '取消',
    onOk() {
      messages.length = 0
      clearError()

      antMessage.success('聊天记录已清空')
    }
  })
  cleanChatMemoryById()
}

// 清除错误信息
const clearError = async () => {
  errorMessage.value = ''

}
const cleanChatMemoryById = async () => {
  const res = await getLoginUser()
  const response = await cleanChatMemory({ chatId: res.data.data?.id })
}
// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 格式化消息内容
const formatMessage = (content: string) => {
  return content
    .replace(/\n/g, '<br>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
}

// 格式化时间
const formatTime = (timestamp: Date) => {
  const now = new Date()
  const diff = now.getTime() - timestamp.getTime()

  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`

  return timestamp.toLocaleString('zh-CN', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取用户token信息（模拟接口）
const fetchUserTokens = async () => {
  try {
    const res = await getLoginUser()
    currentChatId.value= res.data.data?.id
    // 这里应该调用实际的用户信息接口
    const response = await getUserVoById({ id: res.data.data?.id })
    userTokens.value = response.data.data?.token || 0
  } catch (error) {
    console.error('获取用户token信息失败:', error)
  }
}

// 保存token信息到本地
watch(userTokens, (newValue) => {
  localStorage.setItem('userTokens', newValue.toString())
}, { immediate: true })

// 组件挂载
onMounted(() => {
  // 初始化聊天ID
  initializeChatId()

  // 获取用户token信息
  fetchUserTokens()

  // 检查网络状态
  const checkOnlineStatus = () => {
    isOnline.value = navigator.onLine
  }

  window.addEventListener('online', checkOnlineStatus)
  window.addEventListener('offline', checkOnlineStatus)

  // 初始检查
  checkOnlineStatus()

  // 页面卸载时保存聊天ID
  window.addEventListener('beforeunload', () => {
    localStorage.setItem('currentChatId', currentChatId.value)
  })
})
</script>

<style scoped>
.ai-chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.ai-chat-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.ai-chat-container > * {
  position: relative;
  z-index: 1;
}

/* Header Styles */
.chat-header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ai-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.avatar-emoji {
  font-size: 24px;
}

.header-info {
  flex: 1;
}

.ai-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
}

.ai-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: #7f8c8d;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e74c3c;
  transition: background-color 0.3s;
}

.status-dot.online {
  background: #27ae60;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.token-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8px;
  min-width: 80px;
}

.token-label {
  font-size: 0.75rem;
  color: #7f8c8d;
  margin-bottom: 0.25rem;
}

.token-count {
  font-size: 1rem;
  font-weight: 600;
  color: #667eea;
}

/* Messages Styles */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  scroll-behavior: smooth;
}

.messages-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.welcome-message {
  text-align: center;
  padding: 3rem 1rem;
}

.welcome-content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.welcome-emoji {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.welcome-content h2 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.welcome-content p {
  color: #7f8c8d;
  margin-bottom: 1rem;
}

.session-info {
  margin-bottom: 1.5rem;
}

.session-id {
  font-size: 0.75rem;
  color: #95a5a6;
  background: rgba(149, 165, 166, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.message-item {
  display: flex;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.3s ease-out;
}

.message-item.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 0.75rem;
  flex-shrink: 0;
}

.user-message .message-avatar {
  background: linear-gradient(135deg, #3498db, #2980b9);
}
.avatar-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.ai-message .message-avatar {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.message-content {
  max-width: 70%;
  min-width: 100px;
}

.message-bubble {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.user-message .message-bubble {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.message-text {
  line-height: 1.5;
  word-wrap: break-word;
}

.message-text code {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

.message-text pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.token-usage {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
  color: #7f8c8d;
}

.token-icon {
  font-size: 0.8rem;
}

.message-time {
  font-size: 0.75rem;
  color: #95a5a6;
  margin-top: 0.25rem;
  text-align: center;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0.5rem 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bdc3c7;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

.typing-text {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: #7f8c8d;
}

.error-message {
  margin: 1rem 0;
  text-align: center;
}

.error-content {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #e74c3c;
}

.error-icon {
  font-size: 1.2rem;
}

/* Input Area Styles */
.chat-input-area {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.input-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.message-input {
  flex: 1;
  border-radius: 20px !important;
  border: 2px solid transparent !important;
  background: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
}

.message-input:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.message-input:disabled {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #bdc3c7 !important;
}

.send-button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
}

.send-button:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
}

.send-button:disabled {
  background: #bdc3c7 !important;
  transform: none !important;
  box-shadow: none !important;
}

.input-tips {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.tip-item {
  font-size: 0.75rem;
  color: #7f8c8d;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}

.tip-item.warning {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

/* Modal Styles */
.token-modal-content {
  text-align: center;
  padding: 1rem;
}

.modal-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.modal-actions {
  margin-top: 1.5rem;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .ai-chat-container {
    height: 100vh;
  }

  .chat-header {
    padding: 0.75rem;
  }

  .header-content {
    gap: 0.75rem;
  }

  .ai-title {
    font-size: 1.1rem;
  }

  .ai-subtitle {
    font-size: 0.8rem;
  }

  .token-info {
    min-width: 70px;
    padding: 0.4rem;
  }

  .token-label {
    font-size: 0.7rem;
  }

  .token-count {
    font-size: 0.9rem;
  }

  .chat-messages {
    padding: 0.75rem;
  }

  .message-content {
    max-width: 85%;
  }

  .welcome-content {
    padding: 1.5rem;
  }

  .welcome-emoji {
    font-size: 2.5rem;
  }

  .quick-actions {
    flex-direction: column;
    align-items: center;
  }

  .input-tips {
    gap: 0.5rem;
  }

  .tip-item {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .header-content {
    gap: 0.5rem;
  }

  .ai-avatar {
    width: 40px;
    height: 40px;
  }

  .avatar-emoji {
    font-size: 20px;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .token-info {
    min-width: 60px;
    padding: 0.3rem;
  }

  .message-avatar {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    margin: 0 0.5rem;
  }

  .message-content {
    max-width: 90%;
  }

  .welcome-content {
    padding: 1rem;
  }

  .input-wrapper {
    gap: 0.5rem;
  }

  .send-button {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .ai-chat-container::before {
    background: rgba(30, 30, 30, 0.95);
  }

  .chat-header {
    background: rgba(40, 40, 40, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .ai-title {
    color: #ecf0f1;
  }

  .ai-subtitle {
    color: #bdc3c7;
  }

  .token-info {
    background: rgba(102, 126, 234, 0.2);
  }

  .token-label {
    color: #bdc3c7;
  }

  .welcome-content {
    background: rgba(40, 40, 40, 0.8);
  }

  .welcome-content h2 {
    color: #ecf0f1;
  }

  .welcome-content p {
    color: #bdc3c7;
  }

  .message-bubble {
    background: rgba(50, 50, 50, 0.9);
    color: #ecf0f1;
  }

  .message-time {
    color: #7f8c8d;
  }

  .chat-input-area {
    background: rgba(40, 40, 40, 0.9);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .message-input {
    background: rgba(50, 50, 50, 0.8) !important;
    color: #ecf0f1 !important;
  }

  .tip-item {
    background: rgba(50, 50, 50, 0.6);
    color: #bdc3c7;
  }

  .error-content {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.4);
  }
}
</style>
